<script>
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";

export default defineComponent({
  name: "LevelCard",
  props: {
    hasSlot: {
      type: Boolean,
      default: true,
    },
    setStart: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      status: false,
    });

    onMounted(() => {
      state.status = props.setStart
    })

    watch(
      () => props.setStart,
      (e) => {
        console.log('setStart', e)
        state.status = e
      }
    );

    watch(() => state.status, (e) => {
      emit('update:setStart', e)
    })

    const handleOptionStart = () => {
      if (!state.status) {
        // state.status = true;
        emit("start");
      }
    };

    const handleOptionStop = () => {
      if (state.status) {
        // state.status = false;
        emit("stop");
      }
    };

    return {
      ...toRefs(state),
      handleOptionStart,
      handleOptionStop,
    };
  },
});
</script>

<template>
  <div class="component-level-card-container">
    <div class="status-bar" :style="{ marginBottom: hasSlot ? '12px' : '0' }">
      <div :style="{ cursor: status ? 'not-allowed' : 'pointer' }" class="status-button" @click="handleOptionStart">开启</div>
      <div :style="{ cursor: status ? 'pointer' : 'not-allowed' }" class="status-button" @click="handleOptionStop">关闭</div>
    </div>
    <slot />
  </div>
</template>

<style lang="scss">
.component-level-card-container {
  width: 100%;
  border: 1px solid #a8a7a7;
  border-radius: 6px;
  padding: 12px 24px;

  .status-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .status-button {
      color: #ffffff;
      font-size: 12px;
      background-color: #fe6266;
      border-radius: 4px;
      height: 24px;
      width: 88px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
  }
}
</style>
